<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true"
					 :model="orderNoObject"
					 >
				<el-form-item>
					<el-input v-model="orderNoObject.orderNo"
							  placeholder="订单号"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="selectOne">查询</el-button>
				</el-form-item>
				<!--<el-form-item>
					<el-button type="primary" @click="handleAdd">新增</el-button>
				</el-form-item>-->
			</el-form>
			<el-button type="warning" @click="sended" round>已经发货</el-button>
			<el-button type="info"@click="closed" round>交易关闭</el-button>
			<el-button type="danger" @click="nopay"round>未付款</el-button>
			<el-button type="success" @click="payed"round>已经支付</el-button>

		</el-col>
				<div class="mytable">
		<!--列表-->
		<el-table
				:data="orderList"
				highlight-current-row
				v-loading="listLoading"
				@selection-change="selsChange"
				style="width: 100%; "
				:row-class-name="tableRowClassName"
				@cell-click="open1"
		       >
			<el-table-column type="expand">
				<template slot-scope="props">
					<el-form label-position="left" inline class="demo-table-expand">
						<el-form-item label="订单号">
							<span>{{ props.row.orderNo }}</span>
						</el-form-item>
						<div v-for="(item,index) of props.row.orderItemVoList" :key="index">
							<el-form-item label="商品 ID">
								<span>{{ item.productId }}</span>
							</el-form-item>
							<el-form-item label="商品名称">
								<span>{{ item.productName }}</span>
							</el-form-item>
							<el-form-item label="图片">
								<img  style="width: 100px; height: 100px"
										:src="'http://img.cdn.imbession.top/'+item.productImage"  >
							</el-form-item>
							<el-form-item label="商品单价">
								<span>{{ item.currentUnitPrice }}</span>
							</el-form-item>
							<el-form-item label="商品数量">
								<span>{{ item.quantity }}</span>
							</el-form-item>
							<el-form-item label="商品总价格">
								<span>{{ item.totalPrice }}</span>
							</el-form-item>

						</div>


					</el-form>
				</template>
			</el-table-column>

			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column type="index" width="60">
			</el-table-column>
			<el-table-column prop="orderNo" label="订单号" width="150" sortable>
			</el-table-column>
			<el-table-column prop="statusDesc" label="订单状态" width="100"   >
			</el-table-column>
			<el-table-column prop="paymentTypeDesc" label="支付方式" width="80" >
			</el-table-column>
			<el-table-column prop="receiverName" label="收货人姓名" width="100" >
			</el-table-column>
			<el-table-column prop="shippingVo" label="收货人详细地址" width="180" >
				<template scope="scope">
				 <span v-text="scope.row.shippingVo.receiverAddress"></span>
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间" min-width="180" sortable>
			</el-table-column>
			<el-table-column prop="payment" label="支付金额(元)" min-width="100" sortable>
			</el-table-column>
			<el-table-column label="操作" width="150">
				<template scope="scope">
					<el-button size="danger" @click="sendGoods(scope.$index, scope.row)">发货</el-button>
				</template>
				<!--<template scope="scope">
					<el-button size="" @click="sendGoods(scope.$index, scope.row)">查看订单详情</el-button>
				</template>-->
			</el-table-column>
		</el-table>

	 	</div>

		<el-col :span="24" class="toolbar">
			<el-pagination layout="prev, pager, next"
						   @current-change="handleCurrentChange"
						   :page-size="10"
						   :total="total"
						   style="float:right;">
			</el-pagination>
		</el-col>

		<!--编辑界面-->
		<!--<el-dialog title="编辑" :visible.sync="editFormVisible" :close-on-click-modal="false">
			<el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
				<el-form-item label="姓名" prop="name">
					<el-input v-model="editForm.name" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="性别">
					<el-radio-group v-model="editForm.sex">
						<el-radio class="radio" :label="1">男</el-radio>
						<el-radio class="radio" :label="0">女</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="年龄">
					<el-input-number v-model="editForm.age" :min="0" :max="200"></el-input-number>
				</el-form-item>
				<el-form-item label="生日">
					<el-date-picker type="date" placeholder="选择日期" v-model="editForm.birth"></el-date-picker>
				</el-form-item>
				<el-form-item label="地址">
					<el-input type="textarea" v-model="editForm.addr"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="editFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
			</div>
		</el-dialog>-->

		<!--新增界面-->
		<!--<el-dialog title="新增" :visible.sync="addFormVisible" :close-on-click-modal="false">
			<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
				<el-form-item label="姓名" prop="name">
					<el-input v-model="addForm.name" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="性别">
					<el-radio-group v-model="addForm.sex">
						<el-radio class="radio" :label="1">男</el-radio>
						<el-radio class="radio" :label="0">女</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="年龄">
					<el-input-number v-model="addForm.age" :min="0" :max="200"></el-input-number>
				</el-form-item>
				<el-form-item label="生日">
					<el-date-picker type="date" placeholder="选择日期" v-model="addForm.birth"></el-date-picker>
				</el-form-item>
				<el-form-item label="地址">
					<el-input type="textarea" v-model="addForm.addr"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
			</div>
		</el-dialog>-->
	</section>
</template>

<script>
	import util from '../../common/js/util'
	//import NProgress from 'nprogress'
	import { getOrderList, removeUser, batchRemoveUser, editUser, addUser } from '../../api/api';

	export default {
		data() {
			return {
				orderItemVoList:[],
				plain:true,
				pageSize:"",
				orderNoObject:{
					orderNo:""

				},
				orderList: [],
				total: 0,
				pageNum: 1,
				listLoading: false,
				sels: [],//列表选中列

				// editFormVisible: false,//编辑界面是否显示
				editLoading: false,
				editFormRules: {
					name: [
						{ required: true, message: '请输入姓名', trigger: 'blur' }
					]
				},
				//编辑界面数据
			/*	editForm: {
					id: 0,
					name: '',
					sex: -1,
					age: 0,
					birth: '',
					addr: ''
				},*/

				// addFormVisible: false,//新增界面是否显示
			/*	addLoading: false,
				addFormRules: {
					name: [
						{ required: true, message: '请输入姓名', trigger: 'blur' }
					]
				},*/
				//新增界面数据
			/*	addForm: {
					name: '',
					sex: -1,
					age: 0,
					birth: '',
					addr: ''
				}*/

			}
		},
		methods: {
			open1(row){
				//拿到当前的订单详情
		var	orderItemVoList=row.orderItemVoList;
				for(var i=0;i<orderItemVoList.length;i++){
					var	productId=	orderItemVoList[i].productId;//商品ID
					var productName=orderItemVoList[i].productName;//商品名称
					var quantity=orderItemVoList[i].quantity;//商品数量
					var totalPrice=orderItemVoList[i].totalPrice;//商品价格
					//遍历这个数组然后去一个一个拿出来显示
						const h = this.$createElement;

                        this.$notify({
                            title: '订单号'+row.orderNo,
							message: h('i', { style: 'color: teal'}, '商品ID：'+productId+'		商品名称：'+productName+'			商品数量:'+quantity+'	商品总价'+totalPrice),
							duration:0
						});

				}


			},
			closed(){

				this.orderList= this.orderList.filter(function (order) {
					return order.statusDesc=="交易关闭";
				})
			},
			nopay(){

				this.orderList= this.orderList.filter(function (order) {
					return order.statusDesc=="未付款";
				})



			},
			payed(){

				this.orderList= this.orderList.filter(function (order) {
					return order.statusDesc=="已付款";
				})

			},
			//sended显示已经发货的
			sended(){

				this.orderList= this.orderList.filter(function (order) {
					return order.statusDesc=="已发货";
				})
					//数组过滤
			},
			//根据订单状态
			tableRowClassName({row, rowIndex}){
				// console.log(row.statusDesc)
				if (row.statusDesc =="已发货") {
					return 'sended';
				} if (row.statusDesc == "交易关闭") {

					return 'closed';
				}if (row.statusDesc == "已付款") {
					return 'payed';
				}
				if (row.statusDesc == "未付款") {
					return 'nopay';
				}if (row.statusDesc == "交易成功")
				{
					return 'compet';
				}
				return '';
			},

			//搜索
			selectOne(){
				var _vm=this
				// console.log(this.orderNoObject.orderNo)拿到在输入框输入的数字
				//调用接口/order/detail/1573796902307
				this.service.get("/order/detail/"+this.orderNoObject.orderNo).then(function (res) {
							// console.log(res)
					if(res.data.status==0){
						//找到了该订单，显示出来orderList变为空在放进去
						_vm.orderList=[];
						_vm.orderList.push(res.data.data)
					}else {
						//没找到输出失败
						_vm.$message({
							message: res.data.msg,
							type: 'error'
						})

					}
				})


			},
			//分页
			handleCurrentChange(pageNum){
					//拿到这个页数
				//去调用接口
				this.pageNum=pageNum;
				this.getOrders()
			},

			//获取订单列表
			getOrders() {
				let para = {
					pageNum: this.pageNum,
					pageSize: this.pageSize
				};
				this.listLoading = true;
				//NProgress.start();
				getOrderList(para).then((res) => {

					this.total = res.data.count;
					this.orderList = res.data.data.list;
					console.log(this.orderList)
					this.listLoading = false;
					//NProgress.done();
				});
			},

			//发货
			sendGoods: function (index, row) {
				var _vm=this;
				//拿到这个orederNo后去发货
				// 调用接口/manage/order/send_goods
				this.service.get("/manage/order/send_goods/"+row.orderNo).then(function (res) {
					if(res.data.status==0){
						//发货成功
						_vm.$message({
							message: res.data.data,
							type: 'success'
						});
						//刷新页面
						_vm.$router.go(0)
					}else {
						//发货失败
						_vm.$message({
							message: res.data.msg,
							type: 'error'
						});
					}

				})



			},

			selsChange: function (sels) {
				this.sels = sels;
			},

		},

		mounted() {
			this.getOrders();
		}
	}

</script>
<style    scoped>

</style>
<style    >

	.el-table  .sended{
		background: cornsilk;
	}
	.el-table .nopay{
		 background:#dd6161;
	 }

	.el-table .closed{
		background:#b4bccc;
	}
	.el-table .payed{
		background: #00ff00;
	}
	.el-table .compet{
		background: #3a8ee6;
	}
	.demo-table-expand {
		font-size: 0;
	}
	.demo-table-expand label {
		width: 90px;
		color: #99a9bf;
	}
	.demo-table-expand .el-form-item {
		margin-right: 0;
		margin-bottom: 0;
		width: 100%;
	}
</style>